<template>
	<view>
		<view>
			<u-toast ref="uToast" show="true" />
		</view>
		<view v-if="load">
			<uni-card title="用户购买的商品" extra="商品信息">
				<view class="itemBox">
					<text class="label">商品名称:</text>
					<text>{{goodsInfo.title}}</text>
				</view>
				<view class="itemBox" style="display: flex;">
					<text class="label">商品主图:</text>
					<view class="imgBox">
						<u-album :urls="imgs" previewFullImage keyName="avatar" multipleMode="widthFix"></u-album>
					</view>
				</view>
				<view class="itemBox">
					<text class="label">数量:</text>
					<text>{{orderDetail.order.count+goodsInfo.unit}}</text>
				</view>
				<view class="itemBox" v-if="orderDetail.order.specId!=null">
					<text class="label">商品规格:</text>
					<text>{{goodsInfo.specName}}</text>
				</view>
			</uni-card>


			<uni-card title="订单信息" extra="用户和订单信息">
				<template v-slot:title>
					<view class="head">
						<text>订单信息</text>
						<view style="margin-left: auto;" v-if="orderDetail.order.status==1">
							<u-button type="primary" text="发货" size="small" @click="sendShow=true"></u-button>
						</view>
					</view>
					<u-line></u-line>
				</template>
				<view class="itemBox" style="display: flex;">
					<text class="label">微信头像:</text>
					<view class="imgBox">
						<u--image :src="orderDetail.avatar" mode="widthFix" shape="circle" width="100rpx"
							height="100rpx">
						</u--image>
						</u--image>
					</view>
					<text class="label" style="margin-left: 20rpx;">昵称:</text>
					<view class="imgBox">
						<text>{{orderDetail.nick}}</text>
					</view>
				</view>
				<view class="itemBox">
					<text class="label">订单编号:</text>
					<text>{{orderDetail.order.orderNum}}</text>
				</view>
				<view class="itemBox" style="display: flex;justify-content: start;">
					<text class="label">订单状态:</text>
					<rich-text v-html="getStatus(orderDetail.order.status)"></rich-text>
				</view>
				<view class="itemBox">
					<text class="label">下单时间:</text>
					<text>{{getTime(1)}}</text>
				</view>
				<view class="itemBox" v-if="orderDetail.order.payType">
					<text class="label">支付类型:</text>
					<text>{{orderDetail.order.payType==1?"余额支付":"微信支付"}}</text>
				</view>
				<view class="itemBox" v-if="orderDetail.order.status!=0&&orderDetail.order.status!=-1">
					<text class="label">支付时间:</text>
					<text>{{getTime(2)}}</text>
				</view>
				<view class="itemBox">
					<text class="label">配送类型:</text>
					<text>{{orderDetail.order.type==0?"自提":orderDetail.order.type==1?"快递":"免费配送"}}</text>
				</view>
				<view class="itemBox">
					<text class="label">商品总价:</text>
					<text>￥{{orderDetail.order.totalPrice}}元</text>
				</view>
				<view class="itemBox">
					<text class="label">实付金额:</text>
					<text>￥{{orderDetail.order.realPrice}}元</text>
				</view>
				<view class="itemBox" v-if="orderDetail.order.type==1">
					<text class="label">运费:</text>
					<text v-if="!orderDetail.order.freightPrice">包邮</text>
					<text v-else>￥{{orderDetail.order.freightPrice}}元</text>
				</view>
				<view class="itemBox" v-if="orderDetail.order.remark!=undefined">
					<text class="label">备注:</text>
					<text>￥{{orderDetail.order.remark}}元</text>
				</view>
				<view v-if="orderDetail.address!=undefined">
					<view class="itemBox">
						<text class="label">收货人名称:</text>
						<text>{{orderDetail.address.name}}</text>
					</view>
					<view class="itemBox">
						<text class="label">收货人电话:</text>
						<text>{{orderDetail.address.phone}}</text>
					</view>
					<view class="itemBox">
						<text class="label">收货人地址:</text>
						<text>{{orderDetail.address.province+orderDetail.address.city+orderDetail.address.area+orderDetail.address.address}}</text>
					</view>
				</view>
			</uni-card>

			<uni-card v-if="orderDetail.afterSale!=undefined">
				<template v-slot:title>
					<view class="head">
						<text>售后申请</text>
						<view style="margin-left: auto;"
							v-if="orderDetail.afterSale.courierNumber&&orderDetail.afterSale.status==1">
							<u-button type="success" text="确认退款" size="small" @click="refundShow=true"></u-button>
						</view>
					</view>
					<u-line></u-line>
				</template>
				<view class="itemBox">
					<text class="label">用户退款理由:</text>
					<text>{{orderDetail.afterSale.redundReason}}</text>
				</view>
				<view class="itemBox">
					<text class="label">退款金额:</text>
					<text>￥{{orderDetail.afterSale.refundAmount}}元</text>
				</view>
				<view class="itemBox">
					<text class="label">退款类型:</text>
					<text>{{orderDetail.afterSale.refundType == 1?"仅退款":"退货退款"}}</text>
				</view>
				<view class="itemBox" style="display: flex;">
					<text class="label">退款状态:</text>
					<rich-text v-html="getRefundStatus()"></rich-text>
				</view>
				<view class="itemBox" v-if="orderDetail.afterSale.status==-1">
					<text class="label">拒绝原因:</text>
					{{orderDetail.afterSale.refusedReason}}
				</view>
				<view class="itemBox">
					<text class="label">商品类型:</text>
					<text>{{orderDetail.afterSale.type == 1?"普通商品":orderDetail.afterSale.type == 2?'团购商品':'平台商品'}}</text>
				</view>
				<view class="itemBox">
					<text class="label">详细描述:</text>
					<text>{{orderDetail.afterSale.content == undefined?"无":orderDetail.afterSale.content}}</text>
				</view>
				<view class="itemBox" v-if="orderDetail.afterSale.courierNumber">
					<text class="label">用户寄回快递单号:</text>
					<text>{{orderDetail.afterSale.courierNumber}}</text>
				</view>
				<view class="itemBox" v-if="orderDetail.afterSale.img!=undefined" style="display: flex;">
					<text class="label">图像凭证:</text>
					<view class="imgBox">
						<u-album :urls="imgs" previewFullImage keyName="img" multipleMode="widthFix"></u-album>
					</view>
				</view>
				<view class="itemBox" v-if="orderDetail.afterSale.status==0" style="display: flex;">
					<u-button type="success" text="审核" size="small" @click="show=true"></u-button>
				</view>
			</uni-card>

			<!-- 审核模态框 -->
			<view>
				<u-modal :show="show" title="审核售后申请" showCancelButton @cancel="show=false" @confirm="auditApply()">
					<view class="slot-content">
						<u-radio-group v-model="radioValue" placement="row">
							<view style="margin-right: 35rpx;">
								<u-radio activeColor="#3daa3d" label="同意" name="1"></u-radio>
							</view>
							<view>
								<u-radio activeColor="red" label="拒绝" name="-1"></u-radio>
							</view>
						</u-radio-group>
						<view v-if="radioValue==1&&orderDetail.afterSale.refundType==2" style="margin-top: 30rpx;">
							<template>
								<u--input placeholder="请输入寄回地址" border="surround" v-model="address" clearable>
								</u--input>
							</template>
						</view>
						<view v-if="radioValue==-1" style="margin-top: 30rpx;">
							<template>
								<u--input placeholder="请输入拒绝原因" border="surround" v-model="refusedReason" clearable>
								</u--input>
							</template>
						</view>
					</view>
				</u-modal>
			</view>

			<!-- 发货模态框 -->
			<view>
				<u-modal :show="sendShow" title="确认发货" showCancelButton @cancel="sendShow=false" @confirm="delivery()">
					<view class="slot-content">
						<template>
							<u-radio-group v-model="radioValue" placement="row">
								<view style="margin-right: 35rpx;" v-if="orderDetail.order.type==1">
									<u-radio activeColor="#3daa3d" label="快递运送" name="1"></u-radio>
								</view>
								<view v-if="orderDetail.order.type==3">
									<u-radio activeColor="#4781ff" label="自行配送" name="2"></u-radio>
								</view>
							</u-radio-group>
							<view v-if="radioValue==1" style="margin-top: 30rpx;">
								<u--input placeholder="请输入快递单号" border="surround" v-model="courierNumber" clearable>
								</u--input>
							</view>
						</template>
					</view>
				</u-modal>
			</view>

			<!-- 确认退款模态框 -->
			<view>
				<u-modal :show="refundShow" title="确认退款" showCancelButton @cancel="refundShow=false"
					@confirm="confirmRefund()" content="请确认已经收到用户寄回的货物并确认完整后再退款，系统将会直接退款给用户">
				</u-modal>
			</view>

		</view>
	</view>
</template>

<script>
	import SOtime from '../../js_sdk/fl-SOtime/SOtime.js';
	export default {
		data() {
			return {
				refundShow: false,
				sendShow: false,
				radioValue: "",
				show: false,
				imgApi: "",
				orderDetail: "",
				goodsInfo: "",
				imgs: [],
				load: false,
				address: "",
				refusedReason: "",
				status: "",
				courierNumber: ""

			}
		},
		onLoad(e) {			
			this.imgApi = this.$reqConfig.URLIMAGE
			this.contentType = this.$reqConfig.CONTENTTYPE + ";+charset=UTF-8"
			this.token = uni.getStorageSync("merchantsToken").token
			this.getDetail(e.id)
		},
		methods: {
			getDetail(id) {
				this.$axios({
					url: "/merchant/merchantGroupGoods/orderDetail",
					method: "post",
					data: {
						orderNum: id
					},
					header: {
						"Authorization": this.token,
						"Content-type": this.contentType,
						"type": "merchantsToken"
					},
				}).then((res) => {
					this.goodsInfo = JSON.parse(res.result.order.snapshot)
					this.orderDetail = res.result
					let img = {
						"avatar": this.imgApi + this.goodsInfo.avatar
					}
					this.imgs[0] = img
					if (this.orderDetail.afterSale != undefined) {
						img.img = this.imgApi + this.orderDetail.afterSale.img
						this.imgs[0] = img
					}
					this.load = true
				})
			},
			getStatus(status) {
				switch (status) {
					case 0:
						return "<font style='color: #6b6a70'>待付款</font>"
					case 1:
						return "<font style='color: #409eff'>已支付(拼团中)</font>"
					case 2:
						return "<font style='color: #e1b919'>待收货</font>"
					case 3:
						return "<font style='color: #3daa3d'>待提货</font>"
					case 4:
						return "<font style='color: #67c23a'>已提货</font>"
					case 5:
						return "<font style='color: #9625c2'>待评价</font>"
					case 6:
						return "<font style='color: #1d6dc2'>已完成</font>"
					case -1:
						return "<font style='color: red'>已取消</font>"
					case -2:
						return "<font style='color: #d59109'>已退款</font>"
				}
			},
			getTime(type) {
				return type == 1 ? SOtime.time3(this.orderDetail.order.createTime) : SOtime.time3(this.orderDetail.order
					.payTime)
			},
			getRefundStatus() {
				let status = this.orderDetail.afterSale.status
				switch (status) {
					case 0:
						return "<font style='color: #409eff'>商家审核中</font>"
					case 1:
						return "<font style='color: #3daa3d'>待寄回</font>"
					case 2:
						return "<font style='color: #d59109'>已退款</font>"
					case -1:
						return "<font style='color: red'>已拒绝</font>"
				}
			},
			auditApply() {
				uni.showLoading({
					title: "审核中......"
				})
				this.$axios({
					url: "/merchant/merchantGoods/auditAfterSale",
					method: "post",
					data: {
						id: this.orderDetail.afterSale.id,
						status: this.radioValue,
						address: this.address,
						refusedReason: this.refusedReason
					},
					header: {
						"Authorization": this.token,
						"Content-type": this.contentType,
						"type": "merchantsToken"
					},
				}).then((res) => {
					this.getDetail(this.orderDetail.order.orderNum)
					uni.hideLoading()
					if (res.code == 0) {
						this.show = false
						this.$refs.uToast.show({
							message: res.result,
							type: "success"
						})
					}

				})
			},
			//发货
			delivery() {
				if (this.radioValue == "") {
					this.$refs.uToast.show({
						message: "请选择发货类型",
						type: "error"
					})
				}
				uni.showLoading({
					title: "发货中......"
				})
				this.$axios({
					url: "merchant/merchantGroupGoods/delivery",
					method: "post",
					data: {
						orderNum: this.orderDetail.order.orderNum,
						type: this.radioValue,
						expressNumber: this.courierNumber,
					},
					header: {
						"Authorization": this.token,
						"Content-type": this.contentType,
						"type": "merchantsToken"
					},
				}).then((res) => {
					this.getDetail(this.orderDetail.order.orderNum)
					uni.hideLoading()
					if (res.code == 0) {
						this.sendShow = false
						this.$refs.uToast.show({
							message: res.result,
							type: "success"
						})
					}
				})
			},
			confirmRefund() {
				uni.showLoading({
					title: "退款中......"
				})
				this.$axios({
					url: "merchant/merchantGoods/confirmedReturn",
					method: "post",
					data: {
						id: this.orderDetail.afterSale.id
					},
					header: {
						"Authorization": this.token,
						"Content-type": this.contentType,
						"type": "merchantsToken"
					},
				}).then((res) => {
					this.getDetail(this.orderDetail.order.id)
					uni.hideLoading()
					if (res.code == 0) {
						this.refundShow = false
						this.$refs.uToast.show({
							message: res.result,
							type: "success"
						})
					}
				})
			}


		}
	}
</script>

<style lang="scss">
	.itemBox {
		padding: 5rpx;

		.imgBox {
			margin-bottom: 30rpx;
		}
	}

	.label {
		font-weight: 800;
		margin-right: 20rpx;
	}

	.head {
		display: flex;
		padding: 20rpx;
	}
</style>
